export default {
  name: 'Params',
  data () {
    return {
      activeName: 'first',
      cateList: [],
      cateChecked: [1, 3, 6],
      manyParamsList: [],
      addParamsInfo: '',
      inputVisible: false,
      addParamsInfoDialog: false,
      addParamsNameinfo: {},
      addParamsRules: {
        name: [
          { required: true, message: '请填写参数名称', trigger: 'cahnge' }
        ]
      },
      editParamsInfoDialog: false,
      editParamsNameinfo: {
        name: '',
        id: 0
      }
    }
  },
  created () {
    this.getCateList()
    this.getParamsInfo()
  },
  methods: {
    async getCateList () {
      const { data } = await this.$get('categories', { params: { type: 3 } })
      this.cateList = data
    },
    // 获取动态参数
    async getParamsInfo () {
      const { data } = await this.$get(`categories/${this.cateChecked[2]}/attributes`, { params: { sel: 'many' } })
      this.manyParamsList = data
      // console.log(data)
    },
    async deleteParamsInfoHandler (vals, item, name, attrId) {
      // vals => 完整的的信息
      // item => 当前点击的信息
      // console.log(vals)
      // console.log(item)
      // console.log(name)
      /* 接口文档补充
        + 请求地址: categories/:id/attributes/:attrId
        + 请求方式: PUT
        + 携带参数:
          => id: 分类 id, 添加在 url 地址上
          => attrId: 属性 id, 添加在 url 地址上
          => attr_name: 属性名称, 请求体
          => attr_sel: 'only' 或者 'many, 请求体
          => attr_vals: 你修改的参数字符串
      */
      const res = vals.filter(t => t !== item).join()
      console.log(res)
      /* eslint-disable quote-props */
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${attrId}`, {
        'attr_name': name,
        'attr_sel': 'many',
        'attr_vals': res
      })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: `修改${name}参数信息成功`
        })
      }
      this.getParamsInfo()
      // const info = this.manyParamsList.find(item => item.attr_id === attrId)
      // info.attr_vals = res
    },
    showAddTagHandler () {
      this.inputVisible = true
    },
    async addParamsInfoHandler (vals) {
      /* 接口文档补充
        + 请求地址: categories/:id/attributes/:attrId
        + 请求方式: PUT
        + 携带参数:
          => id: 分类 id, 添加在 url 地址上
          => attrId: 属性 id, 添加在 url 地址上
          => attr_name: 属性名称, 请求体
          => attr_sel: 'only' 或者 'many, 请求体
          => attr_vals: 你修改的参数字符串
      */
      console.log('你要添加的内容' + this.addParamsInfo)
      console.log('id:' + this.cateChecked[2])
      console.log('attrId:' + vals.attr_id)
      console.log('attr_name:' + vals.attr_name)
      console.log('attr_sel:' + vals.attr_sel)
      console.log('attr_vals:' + vals.attr_vals)
      const addStr = this.addParamsInfo.trim()
      // 判断是否为空字符串
      if (addStr === '') {
        // 还原
        this.inputVisible = false
        // 文本置控
        this.addParamsInfo = ''
        return
      }
      // 判断是否重复
      if (vals.attr_vals.indexOf(addStr) !== -1) {
        // 还原
        this.inputVisible = false
        // 文本置控
        this.addParamsInfo = ''
        this.$message({
          type: 'warning',
          message: '该条信息已存在，请重新添加'
        })
      }
      // 增加信息
      vals.attr_vals.push(addStr)

      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${vals.attr_id}`, {
        'attr_name': vals.attr_name,
        'attr_sel': 'many',
        'attr_vals': vals.attr_vals.join()
      })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '添加成功'
        })
      }
      // 还原
      this.inputVisible = false
      // 文本置控
      this.addParamsInfo = ''
    },
    closeaddParamsInfoDialog () {
      this.$refs.addParams.resetFields()
      this.addParamsName = ''
    },
    addParamsHandler () {
      this.$refs.addParams.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按规则填写表单'
          })
          return
        }
        const { meta } = await this.$post(`categories/${this.cateChecked[2]}/attributes`, {
          'attr_name': this.addParamsNameinfo.name,
          'attr_sel': 'many'
        })
        if (meta.status === 201) {
          this.$message({
            type: 'success',
            message: `创建${this.addParamsNameinfo.name}参数成功`
          })
        }
        this.addParamsInfoDialog = false
        this.getCateList()
      })
    },
    async editParamsInfoHandler (id, name) {
      const { data, meta } = await this.$get(`categories/${this.cateChecked[2]}/attributes/${id}`, {
        'attr_name': name,
        'attr_sel': 'many'
      })
      this.editParamsNameinfo.name = data.attr_name
      this.editParamsNameinfo.id = data.attr_id
      console.log(meta, data)
      this.editParamsInfoDialog = true
    },
    async editParamsHandler () {
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${this.editParamsNameinfo.id}`, {
        'attr_name': this.editParamsNameinfo.name,
        'attr_sel': 'many'
      })
      console.log(meta)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: `修改参数${this.editParamsNameinfo.name}参数成功`
        })
      }
      this.getParamsInfo()
      this.editParamsInfoDialog = false
    },
    async deleatParamsHandler (id) {
      const { meta } = await this.$delete(`categories/${this.cateChecked[2]}/attributes/${id}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '删除信息成功'
        })
      }
      this.getParamsInfo()
    }
  },
  watch: {
    cateChecked: {
      handler () {
        this.getParamsInfo()
      },
      deep: true
    }
  },
  computed: {
    randerParamsInfoList: {
      get () {
        // console.log(this.manyParamsList)
        const res = this.manyParamsList.map(item => {
          const info = { ...item }
          info.attr_vals = item.attr_vals.split(',')
          // console.log(info)
          return info
        })
        // console.log(res)
        return res
      }
    }
  }
}
